<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My ToDo App</title>
    <link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="node_modules/jquery-datetimepicker/build/jquery.datetimepicker.min.css">
    <style>
        .container
        {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            padding: 60px 60px 60px 60px;
            height: 100%;
            width: 100%;
            background: url('image/blackboard.png') no-repeat;
            background-size: 100% ;

        }

        .msg {
            position: absolute;
            display: none;
            text-align: center;
            top: 2%;
            width: 30%;
            height: 30%;
            left: 30%;
            color: #333333;
            background: url("image/remind.png") no-repeat;
            background-size: 100% ;
            padding: 10px;
        }

        .msg-content {
            position: relative;
            top: 10%;

        }



    </style>
</head>
<body>

    <div class="container"><!--总容器-->
        <div class="msg">
            <span class="msg-content"></span>
            <button class="anchor confirmed" type="button">知道了</button>
        </div>
        <h1>备 忘 录</h1>
        <div class="add-task"><!--添加任务-->
            <form action="">
                <input type="text"
                       placeholder="晚上有晚自习，记得去上课哦！"
                       autofocus
                       autocomplete="off"
                >
                <button type="submit">提 交</button>
            </form>
        </div>
        <div class="task-list"><!--清单列表-->
            <!--<div class="task-item" data-index=index>-->
                <!--<span><input type="checkbox"></span>-->
                <!--<span class="task-content">data.content</span>-->
                <!--<span class="fr">-->
                    <!--<span class="action delete">删除</span>-->
                    <!--<span class="action">详细</span>-->
                <!--</span>-->
            <!--</div>-->
        </div>
        <div class="task-detail-mask">

        </div>
        <div class="task-detail"><!--任务详情-->
            <div>
                <div class="content">晚上有晚自习，记得去上课哦！</div><!--任务标题-->
                <div>
                    <div class="desc"><!--任务描述-->
                        <textarea id="" ></textarea>
                    </div>
                </div>
                <div class="remind"><!--定时器-->
                    <input type="date">
                    <!--<button type="submit">submit</button>-->
                </div>
            </div>
        </div>

    </div>
    <video class="alerter" src="mp3/alert.wav" loop="loop"></video>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.js"></script>
    <script src="https://cdn.bootcss.com/store.js/1.3.20/store.min.js"></script>
    <script src="js/base.js"></script>
    <!--<script src="node_modules/store/store.js"></script>-->


</body>
</html>